<template>
	<div class="">
		<div class="menu-head">
			<a-space :size="8">
				<a-button type="primary" @click="editModelMenu('add')">添加顶级菜单</a-button>
			</a-space>
		</div>
		<a-table :pagination="false" :columns="tableColumns" :data-source="menuData.tableData">
			<template #bodyCell="{ text, record, index, column }">
			  <template v-if="column.dataIndex === 'titleBox'">
					{{record.meta.title}}
			  </template>
			  <template v-else-if="column.dataIndex === 'pnameBox'">
			  		{{record.meta.pname}}
			  </template>
			  <template v-else-if="column.dataIndex === 'isMenu'">
			  		<a-tag :color="record.meta.type == 0 ?'#2db7f5':'blue'">{{record.meta.type == 0 ?'菜单':'按钮'}}</a-tag>
			  </template>
			  <template v-else-if="column.dataIndex === 'isShow'">
			  		<a-tag :color="record.meta.show == 0 ?'green':'#f50'">{{record.meta.show == 0 ?'启用':'禁用'}}</a-tag>
			  </template>
			  <template v-else-if="column.dataIndex === 'isLogin'">
			  		<a-tag :color="record.meta.login == 0 ?'green':'#f50'">{{record.meta.login == 0 ?'是':'否'}}</a-tag>
			  </template>
			  <template v-else-if="column.dataIndex === 'iconFront'">
			  		<icon-font v-if="record.meta.icon" :type="record.meta.icon" />
			  </template>
			  <template v-else-if="column.dataIndex === 'operation'">
			  		<a-space>
			  			<a-button @click="editModelMenu('addchildren',record)" type="primary" size="small">
			  				子菜单
			  			</a-button>
			  			<a-button @click="editModelMenu('edit',record)" type="primary" size="small">
			  				编辑
			  			</a-button>
			  			<a-popconfirm title="Sure to delete?" @confirm="delMenu(record )">
			  				<a-button danger type="primary" size="small">
			  					删除
			  				</a-button>
			  			</a-popconfirm>
			  		</a-space>
			  </template>
			</template>
		</a-table>

		<a-modal v-model:visible="menuData.editAddModel" :title="menuData.editModelTitle" :confirm-loading="menuData.menuLoading"
      @ok="menuOK" @cancel="menuCancel" ok-text="确认"  cancel-text="取消">
			<a-form :label-col="{ style: { width: '100px' } }">
				<a-form-item label="类别:">
					<a-select @change="selectTypeChange" :disabled="menuData.settiing.typeDisable" v-model:value="menuData.postData.meta.type" placeholder="please select your zone">
						<a-select-option :value="Number(0)">菜单</a-select-option>
						<a-select-option :value="Number(1)">按钮</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="名称:">
					<a-input v-model:value="menuData.postData.meta.title" placeholder="请输入菜单名称" />
				</a-form-item>
				<a-form-item label="name:">
					<a-input v-model:value="menuData.postData.name" placeholder="请输入name" />
				</a-form-item>
				<a-form-item v-if="menuData.settiing.type == 0" label="icon:">
					<a-input v-model:value="menuData.postData.meta.icon" placeholder="请输入icon图标(如:icon-shiyongshuoming)" />
				</a-form-item>
				<a-form-item v-if="menuData.settiing.type == 0" label="path:">
					<a-input v-model:value="menuData.postData.path" placeholder="请输入path路径(如:/menu)" />
				</a-form-item>
				<a-form-item v-if="menuData.settiing.type == 0" label="component:">
					<a-input v-model:value="menuData.postData.component" placeholder="请输入component(如:basic/menu/index)" />
				</a-form-item>
				<a-form-item label="状态:">
					<a-radio-group v-model:value="menuData.postData.meta.show" name="radioGroup">
					    <a-radio :value="Number(0)">启用</a-radio>
					    <a-radio :value="Number(1)">禁用</a-radio>
					</a-radio-group>
					<!-- <a-select v-model:value="menuData.postData.meta.show" placeholder="please select your zone">
						<a-select-option :value="Number(0)">是</a-select-option>
						<a-select-option :value="Number(1)">否</a-select-option>
					</a-select> -->
				</a-form-item>
				<a-form-item  v-if="menuData.settiing.type == 0" label="登录:">
					<a-radio-group v-model:value="menuData.postData.meta.login" name="radioGroup">
					    <a-radio :value="Number(0)">是</a-radio>
					    <a-radio :value="Number(1)">否</a-radio>
					</a-radio-group>
					<!-- <a-select v-model:value="menuData.postData.meta.login" placeholder="please select your zone">
						<a-select-option :value="Number(0)">是</a-select-option>
						<a-select-option :value="Number(1)">否</a-select-option>
					</a-select> -->
				</a-form-item>
			</a-form>
		</a-modal>
	</div>

</template>
<script>
	import {
		defineComponent,
		ref,
		reactive
	} from 'vue';
	import { createFromIconfontCN } from '@ant-design/icons-vue';
	import { getMenu } from "@/api/login.js"
	const IconFont = createFromIconfontCN({
	  scriptUrl: import("@/utils/iconFront.js"),
	});
	
	const tableColumns = [
		{
			title: '名称',
			dataIndex: 'titleBox',
			// key:'title',
			// slots: {
			// 	customRender: 'titleBox'
			// },
		},{
			title: '图标',
			dataIndex: 'iconFront',
			// key:'icon',
			// slots: {
			// 	customRender: 'iconFront'
			// },
		},
		
		{
			title: '路由',
			dataIndex: 'path',
			key: 'path',
		},
		{
			title: '类型',
			dataIndex: 'isMenu',
			// key: 'name',
			// slots: {
			// 	customRender: 'isMenu'
			// },
		},
		{
			title: '状态',
			dataIndex: 'isShow',
			// key: 'name',
			// slots: {
			// 	customRender: 'isShow'
			// },
		},
		{
			title: '是否登录',
			dataIndex: 'isLogin',
			// key: 'name',
			// slots: {
			// 	customRender: 'isLogin'
			// },
		},
		{
			title: 'Name',
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: '父Name',
			dataIndex: 'pnameBox',
			// slots: {
			// 	customRender: 'pnameBox'
			// },
		},
		
		{
			title: 'component',
			dataIndex: 'component',
			key: 'component',
		},
		{
			title: '操作',
			dataIndex: 'operation',
			// slots: {
			// 	customRender: 'operation'
			// },
		},
	];
	
	
	const menuData = reactive({
		tableData:[],
		editModelTitle:'添加菜单',
		editAddModel:false,
		menuLoading:false,
		settiing: {
			type:0,//0|菜单 1|按钮
			typeDisable:false
		},
		postData:{
			'children': [],
			'component': "",
			'id': "4",
			'meta': {
				'pname': "", 
				'title': "", 
				'icon': "", 
				'type': 0, 
				'show': 0, 
				'login': 0,
			},
			'name': "",
			'path': "",
		}
	})
	//select类型选择监听
	const selectTypeChange = (e,i) =>{
		menuData.settiing.type = e
		// 数据清空
		menuData.postData.component = ""
		// menuData.postData.name = ""
		menuData.postData.path = ""
		// menuData.postData.meta.pname = ""
		// menuData.postData.meta.title = ""
		menuData.postData.meta.icon = ""
		// menuData.postData.meta.type = 0
		// menuData.postData.meta.show = 0
		menuData.postData.meta.login = 0
		
	}
	
	
	// 编辑/添加
	const editModelMenu = (type,e) => {
		menuData.editAddModel = true
		if(type == 'add'){
			menuData.editModelTitle = "添加顶级菜单"
			menuData.postData.meta.type = 0
			menuData.postData.meta.pname = 'dashboard'
			menuData.settiing.type = 0
			menuData.settiing.typeDisable = true
		}else if(type == 'edit'){
			if(e.meta.type == 0){
				menuData.editModelTitle =  e.meta.title+" — 编辑菜单"
				menuData.settiing.type = 0
				menuData.postData = e;
				
			}else{
				menuData.editModelTitle =  e.meta.title+" — 编辑按钮"
				menuData.settiing.type = 1
				menuData.postData = e;
			}
		}else{
			menuData.editModelTitle = e.meta.title+" — 添加子元素"
			menuData.postData.meta.type = 0
			menuData.postData.meta.pname = e.name
			menuData.settiing.type = 0
			menuData.settiing.typeDisable = false
		}
	}
	//删除菜单
	const delMenu = (e) => {
		console.log(e)
	};
	// 确认
	const menuOK = () => {
		menuData.menuLoading = true;
		setTimeout(()=>{
			menuData.menuLoading = false;
		},2000)
	}
	//取消
	const menuCancel = () =>{
		getTable()
	}
	//请求数据
	const getTable = () =>{
		getMenu().then(e=>{
			menuData.tableData = fil(e.data.data)
		})
	}
	
	export default defineComponent({
		components: {
			IconFont
		},
		setup() {
			getTable()
			return {
				tableColumns,
				menuData,
				selectTypeChange,
				editModelMenu,
				delMenu,
				menuOK,
				menuCancel
			};
		},
	});
	
	function fil(arr) {
		arr.forEach(e=>{
			e.key = e.id
			if(e.children){
				if(e.children.length<=0){
					delete e.children;
				}else{
					fil(e.children) 
				}
			}
		})
		return arr
	}
</script>
<style lang="scss" scoped="scoped">
	.menu-head{
		margin-top: 5px;
		margin-bottom: 10px;
	}
</style>